import React from 'react'
import EventWrapper from '../../../imvc/components/EventWrapper'
import Style from '../../../imvc/components/Style'
import Input from '../../../imvc/components/Input'
import Connect from '../../../imvc/components/Connect'

export default function View({ state, handlers }) {
  return (
    <Layout>
      <Style name="style" />
      <Style name="adjust" />
      <Main />
    </Layout>
  )
  return (
    <div>
      <h1>View - lists/:id</h1>
      <button onClick={handlers.handleBackToLists}>back-to-lists</button>
      <EventWrapper as='h3' onClick='handleReverse'>revert</EventWrapper>
      <pre>
        {JSON.stringify(state, null, 2)}
      </pre>
    </div>
  )
}

function Layout({ children }) {
  return (
    <div className="layout__container">
      {children}
    </div>
  )
}

function Main() {
  return (
    <div className="main__content">
    	<div className="base_hd">
    		<div className="text_nav basefix">
    			<a className="float_left" href="#">
    				<img
    					src="//pic.ctrip.com/VacationOnlinePic/vbooking/offline/supplier/head_logo.png"
    					alt="供应商管理系统" />
    			</a>
    			<div className="text_nav_right">
    				<span>欢迎您：S43856</span>
    				<a href="###">返回首页</a>
    				<em>|</em>
    				<a href="###">快速切换</a>
    				<em>|</em>
    				<a href="###">口令</a>
    				<em>|</em>
    				<a href="###">注销</a>
    			</div>
    		</div>
    		{/* <h1><img src="//pic.ctrip.com/VacationOnlinePic/vbooking/offline/supplier/logo.png" alt="供应商管理系统" /></h1> */}
    		<div className="base_nav_bg">
    			<div className="base_nav">
    				<a href="###" className="cur">违约金比例维护</a>
    			</div>
    		</div>
    	</div>
    	<div className="base_bd">
    		<div className="mod mod_info">
    			<table className="base_table">
    				<tbody>
    					<tr>
    						<th style={{width: 130}}>供应商ID：</th>
    						<td>
    							<Input
    								type="text"
    								style={{width: 150}}
    								className="input_text inputSel"
    								id="notice3"
                    name='queryParameter.supplierId'
    						 />
    						</td>
    						<th style={{width: 130}}>公司名称：</th>
    						<td>
    							<Input
    								type="text"
    								style={{width: 150}}
    								className="input_text inputSel"
    								id="notice"
                    name='queryParameter.companyName'
    							/>
    						</td>
    						<th style={{width: 130}}>是否有效：</th>
    						<td>
    							<select name="select" style={{width: 150}}>
    								<option>全部</option>
    							</select>
    						</td>
    						<td style={{textAlign: 'center'}}>&nbsp;</td>
    					</tr>
    					<tr>
    						<th style={{width: 130}}>业务类型：</th>
    						<td>
    							<input
    								type="text"
    								style={{width: 150}}
    								className="input_text inputSel"
    								id="notice3"
    							/>
    						</td>
    						<th style={{width: 130}}>合作类型：</th>
    						<td>
    							<select name="select" style={{width: 150}}>
    								<option>全部</option>
    							</select>
    						</td>
    						<th style={{width: 130}}>合作区域：</th>
    						<td>
    							<select name="select" style={{width: 150}}>
    								<option>全部</option>
    							</select>
    						</td>
    						<td style={{textAlign: 'center'}}>
    							<input
    								type="button"
    								className="btn btn btn_blue"
    								defaultValue="查询" />
    						</td>
    					</tr>
    					<tr>
    						<th style={{width: 130}}>重要性维度：</th>
    						<td>
    							<select name="select" style={{width: 150}}>
    								<option>全部</option>
    							</select>
    						</td>
    						<th style={{width: 130}}>是否VBooking供应商：</th>
    						<td>
    							<select name="select" style={{width: 150}}>
    								<option>全部</option>
    							</select>
    						</td>
    						<th style={{width: 130}}>距离合同截止时间：</th>
    						<td>
    							<select name="select" style={{width: 150}}>
    								<option>全部</option>
    							</select>
    						</td>
    						<td style={{textAlign: 'center'}}>&nbsp;</td>
    					</tr>
    					<tr>
    						<th style={{width: 130}}>业务经理：</th>
    						<td>
    							<input
    								type="text"
    								style={{width: 150}}
    								className="input_text inputSel"
    								id="notice3"
    							/>
    						</td>
    						<th style={{width: 130}}>业务经理邮箱前缀：</th>
    						<td>
    							<input
    								type="text"
    								style={{width: 150}}
    								className="input_text inputSel"
    								id="notice"
    							/>
    						</td>
    						<th style={{width: 130}}>业务经理所属BU：</th>
    						<td>
    							<select name="select" style={{width: 150}}>
    								<option>全部</option>
    							</select>
    						</td>
    						<td style={{textAlign: 'center'}}>&nbsp;</td>
    					</tr>
    					<tr>
    						<th>供应商身份：</th>
    						<td>
    							<select style={{width: 150}}>
    								<option>全部</option>
    							</select>
    						</td>
    						<th />
    						<td />
    						<th />
    						<td />
    						<td style={{textAlign: 'center'}} />
    					</tr>
    				</tbody>
    			</table>
    		</div>
    		<Connect as={TableList} $query={{ 'list': 'list' }} />
    		<ul className="info_inall layoutfix">
    			<li className="left">共2条&nbsp;&nbsp;每页显示&nbsp;
    				<select style={{width: 50}}>
    					<option>1</option>
    					<option>2</option>
    					<option>3</option>
    					<option>4</option>
    					<option>5</option>
    					<option>6</option>
    					<option>7</option>
    					<option>8</option>
    					<option>9</option>
    					<option>10</option>
    				</select>&nbsp;条
    			</li>
    			<li className="right">
    				<div className="c_page">
    					<a href="###" className="c_up">上一页</a>
    					<div className="c_page_list layoutfix">
    						<a href="###">1</a>
    						<span className="c_page_ellipsis">...</span>
    						<a href="###">2</a>
    						<a href="###">3</a>
    						<a href="###">4</a>
    						<a href="###" className="current">5</a>
    						<a href="###">6</a>
    						<a href="###">7</a>
    						<a href="###">8</a>
    						<span className="c_page_ellipsis">...</span>
    						<a href="###">999</a>
    					</div>
    					<a href="###" className="c_down">下一页</a>
    					<div className="c_pagevalue">到<input type="text" className="c_page_num" name />页<input
    						type="button"
    						className="c_page_submit"
    						defaultValue="确定"
    						name /></div>
    				</div>
    			</li>
    		</ul>
    	</div>
    	<div className="base_ft">
    		Copyright© 2014 Ctrip.com All rights reserverd
    	</div>
    </div>
  )
}

function TableList({ list }) {
  if (list.length === 0) {
    return <NoQueryResult />
  }
  return (
    <table className="date_table">
      <tbody>
        <tr>
          <th width={70}>供应商ID</th>
          <th>公司名称</th>
          <th width={70}>所在省市</th>
          <th width={70}>第一业务<br />联系人姓名</th>
          <th width={110}>第一业务<br />联系人手机</th>
          <th width={150}>第一业务<br />联系人电子邮箱</th>
          <th width={70}>首次合同<br />起始日期</th>
          <th width={70}>合同截止日期</th>
          <th width={150}>OA备注</th>
          <th width={80}>操作</th>
        </tr>
        {list.map(crateRow)}
      </tbody>
    </table>
  )
}

function NoQueryResult() {
  return (
    <div
      style={{
        textAlign: 'center',
        padding: '10px 0 14px'
      }}
    >
      未查询到任何数据！
    </div>
  )
}

const crateRow = (value, index) => {
  return (
    <tr key={value.id}>
      <td>{value.id}</td>
      <td>{value.name}</td>
      <td>{value.pc}</td>
      <td>{value.fullName}</td>
      <td>{value.phone}</td>
      <td>{value.email}</td>
      <td>{value.startAt}</td>
      <td>{value.endAt}</td>
      <td />
      <td>
        <a href="#">新增</a>
      </td>
    </tr>
  )
}
